<script setup lang="ts">
  import {onMounted, ref, watch} from "vue";
  import Form from "./Form.vue";
  import {useApiStore} from "../../store/api.ts";
  import {Close} from "@element-plus/icons-vue";
  
  const apiStore = useApiStore()
  // 标签页
  const editableTabsValue = ref("1")
  const tabList: any = ref([
    {
      id: "",
      title: '标签',
      name: "1",
      requestUrl: "http://localhost:8080/test/demo",
      requestMethod: "GET",
      paramsList: [{key: "", value: ""}],
      dataList: [{key: "", value: ""}],
      headers: [{key: "", value: ""}]
    }
  ])
  onMounted(() => {
    if (apiStore.apiList.length) {
      tabList.value = apiStore.apiList
    } else {
      tabList.value[0].id = Date.now().toString()
      tabList.value[0].name = Date.now().toString()
    }
    editableTabsValue.value = tabList.value[0].name
    for (let i = 0; i < tabList.value.length; i++) {
      visible.value.push(false)
    }
  })
  watch(tabList, () => {
    apiStore.SET_API(tabList.value)
  }, {deep: true})
  const handleTabsEdit = (targetName: any, action: 'remove' | 'add') => {
    if (action === 'add') {
      visible.value.push(false)
      const newTabName = Date.now().toString()
      tabList.value.push({
        id: Date.now().toString(),
        title: '标签',
        name: Date.now().toString(),
        requestUrl: "",
        requestMethod: "GET",
        paramsList: [{key: "", value: ""}],
        dataList: [{key: "", value: ""}],
        headers: [{key: "", value: ""}]
      })
      editableTabsValue.value = newTabName
    } else if (action === 'remove') {
      if (editableTabsValue.value === targetName) {
        tabList.value.forEach((tab: any, index: number) => {
          if (tab.name === targetName) {
            visible.value = visible.value.filter((_: any, i: number) => i !== index)
            const nextTab = tabList.value[index + 1] || tabList.value[index - 1]
            if (nextTab) {
              editableTabsValue.value = nextTab.name
            }
          }
        })
      }
      tabList.value = tabList.value.filter((tab: any) => tab.name !== targetName)
    }
  }
  
  const visible: any = ref([])
  const editVal = ref("")
  const openEditTab = (index: number) => {
    visible.value[index] = true
  }
  const editTab = (index: number) => {
    tabList.value[index].title = editVal.value || "标签"
    visible.value[index] = false
    editVal.value = ""
  }
</script>

<template>
  <div class="box">
    <el-tabs
        v-model="editableTabsValue"
        type="card"
        class="demo-tabs"
        addable
        @edit="handleTabsEdit"
        :closable="tabList.length>1"
    >
      <el-tab-pane
          v-for="(item,index) in tabList"
          :key="item.name"
          :label="item.title"
          :name="item.name"
      >
        <template #label>
          <el-popover :visible="visible[index]" placement="top" :width="160" trigger="click">
            <div style="text-align: right;display: flex;">
              <el-input v-model="editVal" @keydown.enter="editTab(index)" @blur="editTab(index)" placeholder="修改标签名"></el-input>
              <el-button link :icon="Close" @click="visible[index]=false" style="margin-left: 10px"></el-button>
            </div>
            <template #reference>
              <el-button link @dblclick="openEditTab(index)" :type="item.name===editableTabsValue?'primary':''">
                {{ item.title }}
              </el-button>
            </template>
          </el-popover>
        </template>
        <Form :data="item"></Form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
  .box {
    width: 100%;
    height: 100%;
  }
</style>